<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
    <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #ovarul{
                width: 100%;
                height: 600px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: steelblue;
            }
            #imgli{
                display: flex;
                width: 1000px;
                height: 100px;
                
                
            }
            #imgli img{
                width: 100px;
                height: 100px;
            }
            #outer{
                width: 300px;
                height: 100px;
                background-color: red;
                display: flex;
                align-items: center;
                overflow: hidden;
            }
             
    </style>
<body>
    <div id="ovarul">
        <div id="outer">
            <div id="imgli" onmouseenter="mouseEnterAction();" onmouseleave="mouseLeaveAction();" >
                <img src="./img/1.webp" alt="">
                <img src="./img/2.webp" alt="">
                <img src="./img/3.webp" alt="">
                <img src="./img/4.webp" alt="">
                <img src="./img/5.webp" alt="">
                <img src="./img/6.webp" alt="">
                <img src="./img/7.webp" alt="">
                <img src="./img/8.webp" alt="">
                <img src="./img/9.webp" alt="">
                <img src="./img/10.webp" alt="">
                <img src="./img/1.webp" alt="">
                <img src="./img/2.webp" alt="">
                <img src="./img/3.webp" alt="">
                <img src="./img/4.webp" alt="">
                <img src="./img/5.webp" alt="">
                <img src="./img/6.webp" alt="">
            </div>
        </div>
       
    </div>
      
</body>

         <script>
               var obj_imgli= document.getElementById('imgli');
               var timer = null;
               var sum=0;
               
               function mg(){
                   sum--;
                   obj_imgli.style.marginLeft=sum+'px';
                   if (sum==-1000) {
                       sum=0;
                   }
                   if (sum%100==0) {
                       clearInterval(timer)
                       setTimeout(function(){
                       timer=setInterval(mg,10)
                    },1000)
                       
                   }
                   
                } 

                function mouseEnterAction(){
                    clearInterval(timer);
                }
                function mouseLeaveAction(){
                    timer=setInterval(mg,10);
                }
               
               
               onload=function(){
                   timer=setInterval(mg,10)
               }
         </script>
</html>